<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 2. 提前设置页面结构的样式 */
        .box{width: 300px;border:solid 1px black;float: left;text-align: center;}
        .box img{width: 80%;}
        .box p:nth-child(3){line-height: 20px;height: 40px;overflow: hidden;}
    </style>
</head>
<body>
    <!-- 1. 假设页面结构 -->
    <div class="box">
        <img src="" alt="">
        <p></p>
        <p></p>
    </div>
</body>
<!-- 3. 引入数据 -->
<script src="./data.js"></script>
<script>

    // 4. 准备字符容器
    var str = '';

    // 5. 遍历数据
    for(var i=0;i<data.length;i++){
        // 6. 拼接字符串
        str += '<div class="box"><img src="'+data[i].img+'" alt=""><p>'+data[i].price+'</p><p>'+data[i].proName+'</p></div>';
    }
    
    // 7. 设置到页面
    document.write(str);

</script>
</html>